/**
 * 主题系统 - 浅色和深色主题变量
 */

// 浅色主题（默认）
:root {
  // 主色调
  --color-primary: #409eff;
  --color-primary-light: #79bbff;
  --color-primary-lighter: #a0cfff;
  --color-primary-dark: #337ecc;
  
  --color-success: #67c23a;
  --color-success-light: #95d475;
  --color-success-dark: #529b2e;
  
  --color-warning: #e6a23c;
  --color-warning-light: #ebb563;
  --color-warning-dark: #b88230;
  
  --color-danger: #f56c6c;
  --color-danger-light: #f78989;
  --color-danger-dark: #c45656;
  
  --color-info: #909399;
  --color-info-light: #a6a9ad;
  --color-info-dark: #73767a;
  
  // 文本颜色
  --text-color-primary: #303133;
  --text-color-regular: #606266;
  --text-color-secondary: #909399;
  --text-color-placeholder: #c0c4cc;
  --text-color-disabled: #c0c4cc;
  
  // 背景颜色
  --bg-color: #ffffff;
  --bg-color-page: #f2f3f5;
  --bg-color-overlay: #ffffff;
  --bg-color-light: #f5f7fa;
  --bg-color-lighter: #fafafa;
  --bg-color-extra-light: #fafcff;
  
  // 边框颜色
  --border-color: #dcdfe6;
  --border-color-light: #e4e7ed;
  --border-color-lighter: #ebeef5;
  --border-color-extra-light: #f2f6fc;
  --border-color-dark: #d4d7de;
  --border-color-darker: #cdd0d6;
  
  // 填充颜色
  --fill-color: #f0f2f5;
  --fill-color-light: #f5f7fa;
  --fill-color-lighter: #fafafa;
  --fill-color-extra-light: #fafcff;
  --fill-color-dark: #ebedf0;
  --fill-color-darker: #e6e8eb;
  --fill-color-blank: #ffffff;
  
  // 阴影
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  
  // 遮罩
  --overlay-color: rgba(0, 0, 0, 0.8);
  --overlay-color-light: rgba(0, 0, 0, 0.7);
  --overlay-color-lighter: rgba(0, 0, 0, 0.5);
  
  // 侧边栏 - 浅色主题
  --sidebar-bg: #ffffff;
  --sidebar-border: #f0f0f0;
  --sidebar-text: #606266;
  --sidebar-text-active: #409eff;
  --sidebar-text-hover: #409eff;
  --sidebar-item-bg: transparent;
  --sidebar-item-bg-hover: #f5f7fa;
  --sidebar-item-bg-active: #ecf5ff;
  --sidebar-item-border-active: #409eff;
  --sidebar-submenu-bg: #fafafa;
  --sidebar-submenu-text: #909399;
  
  // 头部
  --header-bg: #ffffff;
  --header-border: #f0f0f0;
  
  // 卡片
  --card-bg: #ffffff;
  --card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  // 表格
  --table-bg: #ffffff;
  --table-header-bg: #fafafa;
  --table-row-hover-bg: #f5f7fa;
  --table-border: #ebeef5;
  
  // 输入框
  --input-bg: #ffffff;
  --input-border: #dcdfe6;
  --input-border-hover: #c0c4cc;
  --input-border-focus: #409eff;
  --input-placeholder: #c0c4cc;
  
  // 按钮
  --button-default-bg: #ffffff;
  --button-default-border: #dcdfe6;
  --button-default-text: #606266;
}

// 深色主题 - 使用统一的 #2c2f3b 主色调
.dark {
  // 主色调 - 使用指定的深色主题颜色
  --color-primary: #409eff;
  --color-primary-light: #79bbff;
  --color-primary-lighter: #a0cfff;
  --color-primary-dark: #337ecc;

  // 辅助颜色 - 使用指定的三种辅助颜色
  --color-success: #67c23a;
  --color-success-light: #95d475;
  --color-success-dark: #529b2e;

  --color-warning: #c67915;  // 指定的辅助颜色1
  --color-warning-light: #d4941f;
  --color-warning-dark: #a86312;

  --color-danger: #c35c5d;   // 指定的辅助颜色2
  --color-danger-light: #d07677;
  --color-danger-dark: #a64a4b;

  --color-error: #7c191e;    // 指定的辅助颜色3
  --color-error-light: #9a2328;
  --color-error-dark: #5e1317;

  --color-info: #909399;
  --color-info-light: #a6a9ad;
  --color-info-dark: #73767a;

  // 文本颜色 - 深色主题
  --text-color-primary: #ffffff;
  --text-color-regular: #e5e5e5;
  --text-color-secondary: #b3b3b3;
  --text-color-placeholder: #8c8c8c;
  --text-color-disabled: #666666;

  // 背景颜色 - 深色主题，统一使用 #2c2f3b
  --bg-color: #2c2f3b;
  --bg-color-page: #242732;
  --bg-color-overlay: #2c2f3b;
  --bg-color-light: #343849;
  --bg-color-lighter: #3c4057;
  --bg-color-extra-light: #444865;
  
  // 边框颜色 - 深色主题，基于 #2c2f3b
  --border-color: #4a4e5f;
  --border-color-light: #525670;
  --border-color-lighter: #5a5e81;
  --border-color-extra-light: #626692;
  --border-color-dark: #42464e;
  --border-color-darker: #3a3e4d;

  // 填充颜色 - 深色主题，基于 #2c2f3b
  --fill-color: #363a4b;
  --fill-color-light: #3e4253;
  --fill-color-lighter: #464a5b;
  --fill-color-extra-light: #4e5263;
  --fill-color-dark: #2e3243;
  --fill-color-darker: #262a3b;
  --fill-color-blank: #2c2f3b;

  // 阴影 - 深色主题
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.6);
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.3);
  --box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);

  // 遮罩 - 深色主题
  --overlay-color: rgba(44, 47, 59, 0.9);
  --overlay-color-light: rgba(44, 47, 59, 0.8);
  --overlay-color-lighter: rgba(44, 47, 59, 0.6);
  
  // 侧边栏 - 深色主题，使用 #2c2f3b
  --sidebar-bg: #2c2f3b;
  --sidebar-border: #4a4e5f;
  --sidebar-text: rgba(255, 255, 255, 0.75);
  --sidebar-text-active: #ffffff;
  --sidebar-text-hover: #ffffff;
  --sidebar-item-bg: transparent;
  --sidebar-item-bg-hover: rgba(255, 255, 255, 0.1);
  --sidebar-item-bg-active: #409eff;
  --sidebar-item-border-active: #409eff;
  --sidebar-submenu-bg: rgba(0, 0, 0, 0.2);
  --sidebar-submenu-text: rgba(255, 255, 255, 0.55);

  // 头部 - 深色主题，使用 #2c2f3b
  --header-bg: #2c2f3b;
  --header-border: #4a4e5f;

  // 卡片 - 深色主题，使用 #2c2f3b
  --card-bg: #2c2f3b;
  --card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.6);

  // 表格 - 深色主题，使用 #2c2f3b
  --table-bg: #2c2f3b;
  --table-header-bg: #363a4b;
  --table-row-hover-bg: #363a4b;
  --table-border: #4a4e5f;

  // 输入框 - 深色主题，使用 #2c2f3b
  --input-bg: #2c2f3b;
  --input-border: #4a4e5f;
  --input-border-hover: #525670;
  --input-border-focus: #409eff;
  --input-placeholder: #8c8c8c;

  // 按钮 - 深色主题，使用 #2c2f3b
  --button-default-bg: #363a4b;
  --button-default-border: #4a4e5f;
  --button-default-text: #e5e5e5;
}

// 主题过渡动画
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

// 滚动条主题适配
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--fill-color-lighter);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color-dark);
  border-radius: 3px;
  
  &:hover {
    background: var(--border-color-darker);
  }
}

.dark ::-webkit-scrollbar-track {
  background: var(--fill-color-dark);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  
  &:hover {
    background: var(--border-color-light);
  }
}
